<template>
  <div class="page page-with-padding">
    <fe-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;">Dialog</fe-header>
    <div class="fe-content">
      <div style="margin:10px;">
        <divider>Dialog</divider> 
        <fe-button type="primary" @click="showDialog('ios', '窗口标题')">iOS Dialog 有标题</fe-button>
        <fe-button type="primary" @click="showDialog('ios')">iOS Dialog 无标题</fe-button>
        <fe-button type="primary" @click="showDialog('android', '窗口标题')">Android Dialog 有标题</fe-button>
        <fe-button type="primary" @click="showDialog('android')">Android Dialog 无标题</fe-button>
        <divider>Alert</divider> 
        <fe-button type="primary" @click="showalert('ios', '真有标题')">iOS Alert 有标题</fe-button>
        <fe-button type="primary" @click="showalert()">iOS Alert 无标题</fe-button>
        <fe-button type="primary" @click="showalert('android','真有标题')">Android Alert 有标题 </fe-button>
        <fe-button type="primary" @click="showalert('android')">Android Alert 无标题</fe-button>
<br>
      </div>
    </div>
  </div>
</template>
<script>
import {Header, Button,Divider} from 'feui'
  export default {
  data () {
    return {
    }
  },
  components:{
    [Header.name]: Header,
    [Button.name]: Button,
    [Divider.name]: Divider
  },
  methods:{
    showalert(skin,title){
      Dialog.alert({
        title: title,
        skin:skin,
        message: '弹窗内容',
        confirmButtonText:'确实'
      }).then(() => {
        // on close
      });
    },
    showDialog (skin, title) {
        console.log(skin,title)
        Dialog.confirm({
          title: title,
          skin:skin,
          message: '弹窗内容',
        }).then(() => {
          // on confirm
          console.log('confirm')
        }).catch(() => {
          // on cancel
          console.log('cancel')
        });

        // Dialog({
        //   title: title,
        //   message: 'hello world',
        //   skin
        // },this.doSomething)
      }
  }
}
</script>
<style scoped lang="less">
</style>
